<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/menu.js"></script>

<div id="app" style="height: 100%;">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">位置</el-breadcrumb-item>
        <el-breadcrumb-item>采购管理</el-breadcrumb-item>
        <el-breadcrumb-item>供应商管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="编号:">
            <el-input v-model="venderCode" placeholder="编号"></el-input>
        </el-form-item>
        <el-form-item label="名称:">
            <el-input v-model="name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="middle" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="middle" @click="clear">清空查询</el-button>
        </el-form-item>
    </el-form>
    <el-button type="primary" size="mini" @click="dialogFormVisible=true">新增</el-button>
    <el-table :data="tableData" height="380px" border style="width: 100%">
        <el-table-column prop="venderCode" label="供应商编号" width="120"></el-table-column>
        <el-table-column prop="name" label="供应商名称" width="120"></el-table-column>
        <el-table-column prop="password" label="供应商密码" width="120"></el-table-column>
        <el-table-column prop="contactor" label="联系人" width="120"></el-table-column>
        <el-table-column prop="address" label="地址" width="120"></el-table-column>
        <el-table-column prop="postCode" label="邮政编码" width="120"></el-table-column>
        <el-table-column prop="createDate" label="注册日期" width="120"></el-table-column>
        <el-table-column prop="tel" label="电话" width="120"></el-table-column>
        <el-table-column prop="fax" label="传真" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
                <el-button type="text" size="medium" @click="del(scope.row)">删除</el-button>
                <el-button type="text" size="medium" @click="handleClick(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :page-sizes="[5, 8, 16, 32, 100]"
            :page-size="pageSize"
            :currentPage="currentPage"
            :total="totalRecord">
    </el-pagination>

    <!--新增供应商弹框-->
    <el-dialog title="新增列表" :visible.sync="dialogFormVisible" width="500px" top="80px">
        <el-form label-width="200px">
            <el-form-item label="供应商编号:" >
                <el-input v-model="form.venderCode"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="供应商名称:" >
                <el-input v-model="form.name"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="供应商密码:" >
                <el-input v-model="form.password"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系人:" >
                <el-input v-model="form.contactor"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址:" >
                <el-input v-model="form.address"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码:" >
                <el-input v-model="form.postCode"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话:" >
                <el-input v-model="form.tel"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="传真:" >
                <el-input v-model="form.fax"  autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: -50px">
            <el-button @click="cancel" size="small">取 消</el-button>
            <el-button type="primary" @click="addSure" size="small">确 定</el-button>
        </div>
    </el-dialog>

    <!--修改供应商弹框-->
    <el-dialog title="修改列表" :visible.sync="dialogFormVisible1" width="500px" top="80px">
        <el-form label-width="200px">
            <el-form-item label="供应商编号:" >
                <el-input v-model="form.venderCode"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="供应商名称:" >
                <el-input v-model="form.name"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="供应商密码:" >
                <el-input v-model="form.password"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系人:" >
                <el-input v-model="form.contactor"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址:" >
                <el-input v-model="form.address"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码:" >
                <el-input v-model="form.postCode"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话:" >
                <el-input v-model="form.tel"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="传真:" >
                <el-input v-model="form.fax"  autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: -50px">
            <el-button @click="cancel" size="small">取 消</el-button>
            <el-button type="primary" @click="updSure" size="small">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    window.onload = function () {

        let vm = new Vue({
            el: "#app",
            data: {
                labelPosition: "left",
                dialogFormVisible: false,
                dialogFormVisible1:false,
                tableData: [],
                currentPage: 1,
                totalRecord: 0,
                pageSize: 5,
                form: {
                    venderCode: "",
                    name: "",
                    password: "",
                    contactor: "",
                    address: "",
                    postCode: "",
                    tel: "",
                    fax: "",
                    createDate:"",
                },
                venderCode: "",
                name: "",
            },
            methods: {
                init: function () {
                    this.loading = false;
                    this.getData(this.currentPage,this.pageSize,this.venderCode,this.name);
                },
                getData : function(curP,pSize,code,name) {
                    let that = this;
                    axios.get("getVender?currentPage="+curP+"&pageSize="+pSize+"&venderCode="+code + "&name="+name).then(function (resp) {
                        that.tableData = resp.data.data.lists;
                        that.totalRecord = resp.data.data.totalRecord;
                    });
                },
                handleCurrentChange: function (val) {
                    this.currentPage = val;
                    this.getData(this.currentPage,this.pageSize,this.venderCode,this.name);
                },
                handleSizeChange: function (val) {
                    this.pageSize = val;
                    this.currentPage = 1;
                    this.getData(this.currentPage,this.pageSize,this.venderCode,this.name);
                },
                handleClick: function (row) {
                    this.form.venderCode = row.venderCode;
                    this.form.name = row.name;
                    this.form.password = row.password;
                    this.form.contactor = row.contactor;
                    this.form.address = row.address;
                    this.form.postCode = row.postCode;
                    this.form.tel = row.tel;
                    this.form.fax = row.fax;
                    this.form.createDate = row.createDate;
                    this.dialogFormVisible1 = true;
                },
                onSubmit: function () {
                    this.getData(1,this.pageSize,this.venderCode,this.name);
                },
                clear:function() {
                    this.form.venderCode
                        =this.form.name
                        =this.form.password
                        =this.form.contactor
                        =this.form.address
                        =this.form.postCode
                        =this.form.tel
                        =this.form.fax
                        = "";
                    this.getData(1,this.pageSize,this.venderCode,this.name);
                },

                cancel:function () {
                    this.dialogFormVisible = false;
                    this.dialogFormVisible1 = false;
                    this.clear();
                    this.$message({
                        showClose: true,
                        message: '你已成功取消',
                        duration: "1000"
                    });
                },
                addSure:function (){
                    let that = this;
                    let proJson=
                        {
                            venderCode:this.form.venderCode,name:this.form.name,password:this.form.password,contactor:this.form.contactor,address:this.form.address,
                            postCode:this.form.postCode,tel:this.form.tel,fax:this.form.fax
                        };
                    axios.post("venderAdd",proJson).then(function (resp){

                        if(resp.data>0) {
                            that.$message({
                                showClose: true,
                                message: '恭喜你，新增成功了',
                                type: 'success',
                                duration: "1000"
                            });
                        }else {
                            that.$message({
                                showClose: true,
                                message: '失败了',
                                type: 'success',
                                duration:"1000"
                            });
                        }

                        that.clear();
                        that.init();
                        that.dialogFormVisible = false;
                    });

                },
                del:function (row){
                    if(window.confirm("确认删除?")){
                        let that = this;
                        this.form.venderCode = row.venderCode;
                        axios.get("venderDel?venderCode="+that.form.venderCode).then(function (resp){
                            that.clear();
                            that.init();
                            console.log(resp.data)
                            if(resp.data>0){
                                that.$message({
                                    showClose: true,
                                    message: '恭喜你，删除成功',
                                    type: 'success',
                                    duration:"1000"
                                });
                            }else {
                                that.$message({
                                    showClose: true,
                                    message: '删除失败',
                                    type: 'success',
                                    duration:"1000"
                                });
                            }
                            that.clear();
                            that.init();
                        });
                    }
                },
                updSure:function (){
                    let that = this;
                    let product = {
                        venderCode:this.form.venderCode,
                        name:this.form.name,
                        password:this.form.password,
                        contactor:this.form.contactor,
                        address:this.form.address,
                        postCode:this.form.postCode,
                        tel:this.form.tel,
                        fax:this.form.fax,
                        createDate:this.form.createDate
                    };
                    console.log(product);
                    axios.post("venderUpd",product).then(function (resp){
                        console.log(resp.data)
                        that.$message({
                            showClose: true,
                            message: '恭喜你，修改成功了',
                            type: 'success',
                            duration:"1000"
                        });
                        that.clear();
                        that.init();
                        that.dialogFormVisible1 = false
                    });
                },
            }
        });
        vm.init();
    }
</script>